import classNames from 'classnames';
import style from './preview.less';
interface PreviewProps {
  url?: string;
  holiday?: string;
  registrationDay?: string;
  schoolDay?: string;
  name?: string;
  quarterDay?: string;
  isChanged?: boolean;
  parentCount?: [];
}

const quarter = {
  Q1: '春',
  Q2: '夏',
  Q3: '秋',
  Q4: '冬',
};

// const subjectList = [
//   { key: '科目', value: '成绩' },
//   {
//     key: '语文',
//     value: '',
//   },
//   {
//     key: '数学',
//     value: '',
//   },
//   {
//     key: '英语',
//     value: '',
//   },
//   {
//     key: '综合',
//     value: '',
//   },
//   {
//     key: '综合',
//     value: '',
//   },
// ];
const Preview = (props: PreviewProps) => {
  const {
    name = '',
    url = '',
    holiday = '',
    registrationDay = '',
    schoolDay = '',
    quarterDay = '',
    isChanged = false,
    parentCount = [],
  } = props;
  const holidayList = holiday!.split('-');
  const registrationDayList = registrationDay!.split('-');
  const schoolDayList = schoolDay!.split('-');
  const quarterDayList = quarterDay!.split('-');

  const subjectList: any = parentCount.map((i) => {
    return {
      key: i,
      value: '',
    };
  });
  if (subjectList.length > 5 && subjectList.length < 10) {
    const n = 10 - subjectList.length;
    for (let i = 0; i < n; i++) {
      subjectList.push({
        key: '',
        value: '',
      });
    }
  }

  return (
    <div
      className={style.template}
      id={isChanged ? 'TemplatePreview' : 'othertemplate'}
      style={{
        width: '764px',
        height: '1052px',
        backgroundSize: 'cover',
        backgroundImage: `url(${url})`,
        // https://img.js.design/assets/img/6361e55cf0632576635fffe0.png#2af78920443a58cf03a5498b0b08afdf
      }}
    >
      {isChanged && (
        <>
          <div className={style.name}>{name} 同学:</div>
          <div className={style.day}>
            我校于 {holidayList[0]}年 {holidayList[1]}月 {holidayList[2]}日放假，
            {registrationDayList[0]}年{registrationDayList[1]}月{registrationDayList[2]}
            日开学报名，{schoolDayList[0]}年 {schoolDayList[1]}月 {schoolDayList[2]}日正式行课。
          </div>
          <div className={style.quarter}>
            <div className={style.quarterSpan}>{quarterDayList[0]}</div>年
            <div className={style.quarterSpan}>{quarter[quarterDayList[1]]}</div>季
          </div>
          <div className={style.headTeacherContainer}>
            <div className={style.headTeacher}>班主任: </div>
            <div className={style.headTeachername}> </div>
          </div>
          <table className={style.subject}>
            {subjectList.slice(0, 5).map((item) => {
              return (
                <>
                  <tr>
                    <td>{item.key}</td>
                    <td>{item.value}</td>
                  </tr>
                </>
              );
            })}
          </table>
          {subjectList.length >= 6 ? (
            <table className={classNames(style.subject, style.subject2)}>
              {subjectList.slice(5, subjectList.length).map((item) => {
                return (
                  <>
                    <tr>
                      <td>{item.key}</td>
                      <td
                        style={{
                          height: '30px',
                        }}
                      >
                        {item.value}
                      </td>
                    </tr>
                  </>
                );
              })}
            </table>
          ) : null}
        </>
      )}
    </div>
  );
};

export default Preview;
